import React from "react";
import './index.css';
import ProductCard from "../../../../../Component/ProductCard";
import {Button,Input} from "antd";
import PriceTag from "../../../../../Component/PriceTag";
import BGUtil from "../../../../../utils/BGUtil"
import MessageUtil from "../../../../../utils/MessageUtil";
import Payment from "../../../../../Common/svg/Payment";
import WeChatSmall from "../../../../../Common/svg/WeChatSmall";
import AliSmall from "../../../../../Common/svg/AliSmall";
import { Radio  } from 'antd';
import Blank from "../../../../../Component/Blank";
import Wallet from "../../../../../Common/svg/Wallet";
import TransactionFinish from "../../../../../Common/svg/Transaction/Finish"
import TransactionWaitDelivery from "../../../../../Common/svg/Transaction/WaitDelivery"
import TransactionWaitPay from "../../../../../Common/svg/Transaction/WaitPay"
import TransactionWaitReceive from "../../../../../Common/svg/Transaction/WaitReceive"
import Bar from "../../../../../Component/Bar";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();
        this.state={
            hired:props.hired,
            text:"hello",
            sellerName:"ives",
            seled:false
        }
        BGUtil.InitBG();
        // IFrameUtil.UpdateIframeHeight();
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    render(){
        return(
            <div className="HireServiceOrderDetail_Container Courseware_Body">
                <div className="HireServiceOrderDetail">
                    <div style={{verticalAlign:"middle"}}>
                    <span className="">
                            <TransactionWaitPay/>
                            <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="3rem"/></div>
                        </span>
                        <span className="">
                            <TransactionWaitDelivery/>
                            <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="3rem"/></div>
                        </span>
                        <span className="">
                            <TransactionWaitReceive/>
                            <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="3rem"/></div>

                        </span>
                        <span className="">
                            <TransactionFinish/>
                        </span>
                    </div>
                </div>
                    
                <div className="HireServiceOrderDetail">
                    <ProductCard
                        title={"Product title"}
                        subtitle={["品牌：大疆", "类型：四周飞行","型号：ZENMUSAKD","sn号：7315 059 4549"]}
                        badge={[
                            <img alt="Insurance" src="/assets/Good/Insurance.png"/>,
                            <img alt="GuaranteeMoney" src="/assets/Good/GuaranteeMoney.png"/>
                        ]}
                        image={<img alt="drone" src="/assets/Drone/drone.png"/>}
                        priceText={<PriceTag currency={"￥"} price={"998"} unit={"天"}/>}
                    />
                </div>
                <div className="Courseware_Body HireServiceOrderDetail">
                <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">卖家昵称</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">订单编号</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="（只能设置一次）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">平台交易号</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="（只能设置一次）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">交易时间</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div >
                        <div className="UserInfo_Down_Margin">
                            <Payment/>支付方式
                        </div>
                        <Radio.Group onChange={e=>this.setState({value: e.target.value})} style={{width:"100%"}} value={this.state.value}>
                                <div onClick={e=>this.setState({value:"fly"})} className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><Wallet/></span>Fly余额支付（可用余额: ￥3000）
                                    <Blank/>  <Radio value={"fly"}></Radio></div>
                                <div onClick={e=>this.setState({value:"ali"})} className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><AliSmall/></span>支付宝支付
                                    <Blank/><Radio value={"ali"}></Radio></div>
                                <div onClick={e=>this.setState({value:"wechat"})} className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><WeChatSmall/></span>微信支付
                                    <Blank/><Radio value={"wechat"}></Radio></div>
                            </Radio.Group>
                    </div>
                </div>
                
                <div className="HireServiceDetail_Bottom">
                        <a href="/trade/hireServicePayDetail" alt="pay">
                            <Button style={{width:"12rem"}} type="" shape="round" size="large">
                                取消
                            </Button>
                        </a>
                        <a href="/trade/hireServicePayDetail" alt="pay">
                            <Button style={{width:"12rem"}} type="primary" shape="round" size="large">
                                提交订单
                            </Button>
                        </a>
                    </div>
            </div>
        )
    }
}